<script setup>
import { ref, onMounted } from 'vue'
import HomePanel from './HomePanel.vue'
import { findHotAPI } from '@/apis/home.js'
// 定义数据
const hotList = ref([])
// 定义请求数据
const getHotList = async () => {
  const res = await findHotAPI()
  hotList.value = res.result
  //console.log('人气推荐',res)
}
onMounted(() => getHotList())
</script>

<template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
    <!--默认插槽 内容-->
    <div class="goods-list">
      <ul>
        <li v-for="item in hotList" :key="item.id">
          <RouterLink class="box" to="#/">
            <div class="pic" :aria-label="item.title">
              <img v-img-lazy="item.picture" />
            </div>
            <div class="info-desc">
              <p class="title overflowtxt">{{item.title}}</p>
              <p class="desc">{{item.alt}}</p>
            </div>
          </RouterLink>
        </li>
      </ul>
    </div>
  </HomePanel>
</template>

<style lang="scss" scoped>
.goods-list{
  width: 100%;
  ul{
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    li{
      width: 25%;
      padding: 0 10px;
      .box{
        display: block;
        .pic{
          width: 100%;
          height: 295px;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            max-width: 100%;
            max-height: 100%;
          }
        }
        .info-desc{
          padding: 15px 10px;
          text-align: center;
          .title{
            font-size: 22px;
            color: #333;
          }
          .desc{
            font-size: 16px;
            color: #999;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
